<template>
	<view class="container">
		<uni-forms labelWidth="80" ref="form" v-model="formData"  validateTrigger="bind" >
			<uni-forms-item name="name" label="显示名称" required>
				<uni-easyinput v-model="formData.name" placeholder="请输入菜单名称" />
			</uni-forms-item>
			<uni-forms-item name="iconType" label="图标Type">
				<uni-easyinput v-model="formData.iconType" :clearable="false" placeholder="请输入菜单图标css样式类名">
					<span slot="right" style="color: #007aff; cursor: pointer;padding-right: 10px;"
						@click="showIconPopup">内置图标</span>
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="iconClass" label="图标样式">
				<uni-easyinput v-model="formData.iconClass" placeholder="" />
			</uni-forms-item>
			<uni-forms-item name="path" label="页面URL">
				<uni-easyinput v-model="formData.path" placeholder="" />
			</uni-forms-item>
			<uni-forms-item name="orderNum" label="序号">
				<uni-easyinput v-model="formData.orderNum" placeholder="请输入菜单序号" />
			</uni-forms-item>
			<uni-forms-item name="status" label="是否启用">
				<switch @change="switchChange" :checked="formData.status=== 1? true : false" />
			</uni-forms-item>

			<view class="uni-button-group">
				<button type="primary" class="uni-button" @click="submitForm"
					style="width: 100px;">保存</button>
				<navigator open-type="navigateBack" ><button class="uni-button"
						style="width: 100px;">返回</button></navigator>
			</view>
			<uni-popup class="icon-modal-box" ref="iconPopup" type="center">
				<view class="icon-modal icon-modal-pc">
					<Icons :tag="false" :fix-window="false" />
				</view>
			</uni-popup>
		</uni-forms>
	</view>
</template>

<script>
	import Icons from '@/pages/demo/icons/icons.vue'
	import {
		updateAppMenuList,
		getDetail
	} from "@/api/eye/appMenu"

	export default {
		components: {
			Icons
		},
		data() {
			return {
				formData: {
					"id": "",
					"name": "",
					"iconType": "",
					"iconClass": "",
					"path": "",
					"orderNum": '',
					"parent_id": "",
					"permission": [],
					"status": null
				},
				rules: {
				}
			}
		},
		onLoad(e) {
			console.log(e)
			this.formData.id = e.id
			this.getDetail(this.formData.id)
		},
		methods: {
			switchChange(e){
				console.log(e.detail.value)
				this.formData.status = e.detail.value == true?1:0
			},
			/**
			 * 触发表单提交
			 */
			submitForm(form) {
				console.log(this.formData)
				updateAppMenuList(this.formData).then((res) => {
					uni.showToast({
						title: '修改成功'
					})
					this.getOpenerEventChannel().emit('refreshData')
					setTimeout(() => uni.navigateBack(), 500)
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
				})
			},

			/**
			 * 获取表单数据
			 * @param {Object} id
			 */
			getDetail(id) {
				uni.showLoading({
					mask: true
				})

				getDetail(id).then((res) => {
					console.log('详情')
					console.log(res)
					const data = res.data
					if (data) {
						this.formData = data
					}
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			showIconPopup() {
				this.$refs.iconPopup.open()
			}
		}
	}
</script>
<style scoped>
	.icon-modal-box {
		padding-top: var(--top-window-height);
	}

	.icon-modal {
		width: 350px;
		background-color: #fff;
		height: 500px;
		overflow-y: scroll;
	}

	@media screen and (min-width: 768px) {
		.icon-modal-pc {
			width: 600px;
		}
	}

	::v-deep .uni-forms-item__label {
		width: 90px !important;
	}
</style>
